<template>
  <div class="scheduleInfo">

      <div style="padding: 10px  20px">
        <el-scrollbar height="750px">
        <el-card class="box-card" shadow="always" style="background: #fafafa;">
          <div>
            <el-steps :active="active" finish-status="success" align-center>
              <el-step
                title="床位申请"
                @click="goStep(1)"
                style="cursor: pointer"
              />
              <el-step
                title="服务计划"
                @click="goStep(2)"
                style="cursor: pointer"
              />
              <el-step
                title="合同签约"
                @click="goStep(3)"
                style="cursor: pointer"
              />
              <el-step
                title="适老化改造"
                @click="goStep(4)"
                style="cursor: pointer"
              />
              <el-step
                title="改造验收"
                @click="goStep(5)"
                style="cursor: pointer"
              />
            </el-steps>
          </div>
          <div v-if="showflag == 1">
            <step1 :applyId="applyId"></step1>
          </div>
          <div v-if="showflag == 2">
            <step2 :applyId="applyId"></step2>
          </div>
          <div v-if="showflag == 3">
            <step3></step3>
          </div>
          <div v-if="showflag == 4">
            <step4 :applyId="applyId"></step4>
          </div>
          <div v-if="showflag == 5">
            <step5 :applyId="applyId"></step5>
          </div>

          <div style="text-align: right;margin-right: 100px;margin-top: 20px">
            <el-button @click="cancel">返 回</el-button>
          </div>
        </el-card>
        </el-scrollbar>
      </div>

  </div>
</template>
<script setup name="scheduleInfo">
import step1 from "./step1.vue";
import step2 from "./step2.vue";
import step3 from "./step3.vue";
import step4 from "./step4.vue";
import step5 from "./step5.vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const active = ref(0);
const showflag = ref(1);
const applyId = ref("");
// const step=ref('')
function goStep(data) {
  console.log("222222");
  showflag.value = data;
  // if (active.value++ > 5) active.value = 0
}
function cancel(){
  router.go(-1)
}
const stopWatch = watch(
  () => route,
  (newVal, oldVal) => {
    applyId.value = newVal.params.id;
    active.value= newVal.params.step-0
  },
  { immediate: true },
);

onBeforeUnmount(() => {
  stopWatch();
});
</script>
<style scoped lang="scss">
.scheduleInfo {
  //padding: 15px;
  //padding-bottom: 50px;
}
</style>
